<template>
  <div class="no_order_box">
    <div class="no_order" v-if="noOrder">
      <div class="no_order_bg"></div>
      <div class="no_order_text">您暂时还没有订单哦，快去购物吧</div>
    </div>
    <div class="recommed_product" v-if="noOrder&&productList.length>0">
      <div class="recommed_product_title">为你推荐</div>
      <div class="recommed_product_list">
        <product-item
          v-for="(item,index) in productList"
          :key="`porduct_list_${index}`" :productInfo="item"
        ></product-item>
      </div>
    </div>
  </div>
</template>

<script>
import productItem from "@/components/product-item";
export default {
  name: "noOrder",
  data() {
    return {};
  },
  props: {
    noOrder: {
      type: Boolean,
      default: false
    },
    record: {
      type: Boolean,
      default: true
    },
    productList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  components: {
    productItem
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.no_order {
  height: 312px;
  background: rgba(255, 255, 255, 1);
  border-top: 1px solid #eaeaea;
  .no_order_bg {
    width: 159px;
    height: 102px;
    background: rgba(0, 174, 239, 1);
    background: url("/img/65.png");
    background-size: cover;
    margin: 99px 113px 0 103px;
  }
  .no_order_text {
    margin-top: 28px;
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 18px;
  }
}
.recommed_product_title {
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: rgba(247, 247, 247, 1);
  font-size: 18px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(48, 48, 48, 1);
  letter-spacing: 11px;
}
.recommed_product_list {
  padding: 0 15px 0 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: rgba(247, 247, 247, 1);
  .recommed_product_item {
    position: relative;
    width: 172px;
    height: 245px;
    background: rgba(255, 255, 255, 1);
    border-radius: 9px;
    margin-bottom: 5px;
    padding: 0 12px 0 12px;
    box-sizing: border-box;
    .product_img_box {
      height: 156px;
      text-align: center;
      .product_img {
        width: 100%;
      }
    }
    .recommed_product_detail {
      .product_status {
        margin-bottom: 6px;
        text-align: center;
        width: 34px;
        height: 14px;
        background: linear-gradient(
          137deg,
          rgba(254, 102, 118, 1) 0%,
          rgba(244, 138, 152, 1) 100%
        );
        border-radius: 0px 7px 0px 7px;
        font-size: 9px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 14px;
      }
      .product_name {
        height: 19px;
        font-size: 14px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(48, 48, 48, 1);
        line-height: 19px;
      }
      .product_des {
        height: 15px;
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(152, 154, 162, 1);
        line-height: 15px;
      }
      .unit_price {
        line-height: 21px;
        .price {
          font-size: 13px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(225, 52, 52, 1);
        }
        .unit {
          font-size: 13px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
        }
        .add_icon {
          float: right;
          width: 21px;
          height: 21px;
          margin-top: 5px;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
